<template>
    <header class="edit-text-box">
        <div class="edit-box">
            <a-input class="edit-input" ref="inputTitleRef" v-model:value="modelValue" style="width: 150px;"
                @blur="state.titleClick = false">
            </a-input>
        </div>
    </header>
</template>

<script setup lang="ts">
import type { InputRef } from 'ant-design-vue/es/vc-input/inputProps'
import { nextTick, reactive, ref } from 'vue'

const modelValue = defineModel()

const inputTitleRef = ref<InputRef>()

const state = reactive<{
    titleClick: boolean,
}>({
    titleClick: false,
})

const titleClick = (flag: boolean) => {
    state.titleClick = flag
    nextTick(() => {
        inputTitleRef.value?.focus()
    })
}
</script>

<style lang='scss' scoped>
.edit-text-box {
    .edit-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .edit-input{
            padding: 3px 5px;
            border:none;
        }
    }
}
</style>